<template>
	<div class="p-4 flex items-center">
		<div class="p-2 border border-solid border-gray-200">
			<div class="flex gap-x-2 pb-4 justify-center">
				<button
					type="button"
					class="bg-indigo-600 text-white text-sm leading-6 font-medium py-2 px-3 rounded-lg"
					@click="onChange('horizontal')"
				>
					水平
				</button>
				<button
					type="button"
					class="bg-indigo-600 text-white text-sm leading-6 font-medium py-2 px-3 rounded-lg"
					@click="onChange('vertical')"
				>
					垂直
				</button>
				<button
					type="button"
					class="bg-indigo-600 text-white text-sm leading-6 font-medium py-2 px-3 rounded-lg"
					@click="bordered = !bordered"
				>
					边框
				</button>
			</div>
			<organization
				:tree-data="treeData"
				:direction="dir"
				:button="button"
				:bordered="bordered"
			/>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import organization from "./components/organization/index.vue";

const dir = ref("vertical");

const bordered = ref(false);

const onChange = (type: string) => {
	dir.value = type;
};

const button = {
	radius: "20px"
};

const treeData = [
	{
		label: "珠海汇流科技有限公司",
		children: [
			// {
			// 	label: "产品研发部",
			// 	children: [
			// 		{
			// 			label: "设计师中心",
			// 			children: [
			// 				{
			// 					label: "视觉设计组"
			// 				},
			// 				{
			// 					label: "C端设计组"
			// 				},
			// 				{
			// 					label: "B端设计组"
			// 				}
			// 			]
			// 		},
			// 		{
			// 			label: "研发中心",
			// 			children: [
			// 				{
			// 					label: "广东工厂研发分部",
			// 					children: [
			// 						{
			// 							label: "行政部"
			// 						},
			// 						{
			// 							label: "财务部"
			// 						},
			// 						{
			// 							label: "采购部"
			// 						},
			// 						{
			// 							label: "销售部"
			// 						},
			// 						{
			// 							label: "质量管理部"
			// 						}
			// 					]
			// 				},
			// 				{
			// 					label: "湖南工厂研发分部"
			// 				},
			// 				{
			// 					label: "广西工厂研发分部"
			// 				}
			// 			]
			// 		}
			// 	]
			// },
			{
				label: "人力资源部",
				children: [
					{
						label: "直营电商部"
					}
				]
			},
			{
				label: "行政中心"
			},
			{
				label: "财务部",
				children: [
					{
						label: "出纳部"
					},
					{
						label: "资金部"
					},
					{
						label: "总部财务"
					}
				]
			}
		]
	}
];
</script>

<style scoped lang="scss"></style>
